.homepage-topics-section {
    background-color: $gray-5;
    @include sm-only {
        display: none;
    }
    > h2 {
        margin-top: 32px;
        margin-bottom: 0;
        & + p {
            margin-bottom: 8px;
            margin-top: 0;
            color: $blue-60;
        }
    }
    .homepage-topic {
        &:not(:last-child) {
            padding-bottom: 16px;
            border-bottom: 1px solid $blue-10;
        }
        &:last-child {
            padding-bottom: 48px;
        }
    }
    .homepage-topic__topic-name {
        color: $blue-60;
        margin-top: 16px;
        margin-bottom: 8px;
    }
    .homepage-topic__topic-list {
        line-height: 1.5rem;
        line-break: anywhere;
        display: flex;
        flex-wrap: wrap;
    }
    .homepage-topic__subtopic,
    .homepage-topic__topic-entry {
        display: inline list-item;
        font-size: 0.875rem;
        white-space: nowrap;
    }
    .homepage-topic__subtopic {
        font-weight: bold;
        list-style: none;
        white-space: nowrap;
        display: inline-block;
        margin-right: 6px;
        &:not(:first-child) {
            &::before {
                content: "|";
                margin-right: 8px;
                color: $blue-90;
            }
        }
    }

    .homepage-topic__topic-entry {
        padding-right: 6px;
        list-style: none;
        &:before {
            color: $blue-30;
            content: "•";
            margin-right: 6px;
            color: $blue-40;
        }
        &:first-child {
            // No disc for the first topic when there's no subtopic heading
            &:before {
                content: unset;
            }
        }
        a {
            color: $blue-90;
            &:hover {
                text-decoration: underline;
            }
        }
    }

    // No disc for the first topic after a subtopic heading
    .homepage-topic__subtopic + .homepage-topic__topic-entry {
        &:before {
            content: unset;
        }
    }
}
